import React, { Component } from 'react'
import { Text, View, StyleSheet, ScrollView, Image, } from 'react-native'
import { Carousel } from '@ant-design/react-native'
import Title from './title'
let musicDataUrl = "http://39.100.242.209:3000/albums"
export default class MainCom extends Component {
  componentDidMount() {
    fetch(musicDataUrl).then(resp => resp.json())
      .then(musics => this.setState({ musics }))
  }
  constructor(props) {
    super(props)
    this.state = {
      musics: []
    }
  }
  render() {
    return (
      <View>
        <Title />
        <ScrollView style={styles.all}>
          <View style={{ marginTop: 10 }}>
            <Carousel
              style={styles.wrapper}
              selectedIndex={1}
              autoplay
              infinite={true}
            >
              <View >
                <Image style={{ width: '100%', height: '100%' }} source={{ uri:'https://img1.baidu.com/it/u=3674534493,200217736&fm=26&fmt=auto&gp=0.jpg' }} />
              </View>
              <View >
                <Image style={{ width: '100%', height: '100%' }} source={{ uri:'https://img2.baidu.com/it/u=1596230332,3031649930&fm=26&fmt=auto&gp=0.jpg'}} />
              </View>
              <View >
                <Image style={{ width: '100%', height: '100%' }} source={{ uri:'https://img0.baidu.com/it/u=234155414,1295859970&fm=26&fmt=auto&gp=0.jpg' }} />
              </View>
              <View >
                <Image style={{ width: '100%', height: '100%' }} source={{ uri:'https://img1.baidu.com/it/u=1290143813,65954612&fm=26&fmt=auto&gp=0.jpg' }} />
              </View>
              <View >
                <Image style={{ width: '100%', height: '100%' }} source={{ uri:'https://img0.baidu.com/it/u=3039270804,2851541314&fm=26&fmt=auto&gp=0.jpg' }} />
              </View>
            </Carousel>
          </View>
          <View style={styles.boxs}>
            <View style={styles.box}>
              <View style={styles.boximg}>
                <Image style={styles.img} source={{ uri:'https://img2.baidu.com/it/u=1678926603,1916463518&fm=26&fmt=auto&gp=0.jpg'}} />
              </View>
              <Text style={styles.boxtext}>
                歌手
              </Text>
            </View>
            <View style={styles.box}>
              <View style={styles.boximg}>
                <Image style={styles.img} source={{ uri:'https://img1.baidu.com/it/u=228061971,3702328882&fm=26&fmt=auto&gp=0.jpg' }} />
              </View>
              <Text style={styles.boxtext}>
                排行
              </Text>
            </View>
            <View style={styles.box}>
              <View style={styles.boximg}>
                <Image style={styles.img} source={{ uri:'https://img0.baidu.com/it/u=3852052604,584846033&fm=26&fmt=auto&gp=0.jpg' }} />
              </View>
              <Text style={styles.boxtext}>
                电台
              </Text>
            </View>
            <View style={styles.box}>
              <View style={styles.boximg}>
                <Image style={styles.img} source={{ uri:'https://img2.baidu.com/it/u=1875284140,2372362285&fm=26&fmt=auto&gp=0.jpg' }} />
              </View>
              <Text style={styles.boxtext}>
                一起
              </Text>
            </View>
          </View>
          <View style={{ justifyContent: 'center' }}>
            <Text style={{ fontSize: 20, color: `rgba(255,100,100,2)`, fontWeight: 'bold' }}>为您推荐已下歌曲：</Text>
            <Text style={{ fontSize: 25 }}>1.《小雨》 林玉英</Text>
            <Text style={{ fontSize: 25 }}>2.《明天会更好》 卓依婷</Text>
            <Text style={{ fontSize: 25 }}>3.《矜持 》李健</Text>
            <Text>4.《甜蜜蜜》 鹿晗</Text>
            <Text>5.《追梦人》 高胜美</Text>
            <Text>6.《爱拼才会》 赢叶启田 </Text>
            <Text>7.《光辉岁月》 谢霆锋</Text>
            <Text>8.《梦醒时分》 潘莎</Text>
            <Text>9.《你的柔情我永远不懂》 林雪</Text>
            <Text>10.《我只在乎你》 刘惜君</Text>
            <Text>11.《冬天里的一把火》 彭楚粤&白澍彭楚粤</Text>

          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#fff',
    height: 165
  },
  containerHorizontal: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 150
  },
  all: {
    display: 'flex',
    marginLeft: '3%',
    marginRight: '3%',
    flexDirection: 'column'
  },
  boxs: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: 24,
    justifyContent: 'space-around'
  },
  box: {
    display: 'flex',
    flexDirection: 'column',
    width: 56,
    height: 96
  },
  boximg: {
    height: 48,
    width: '100%',
    borderRadius: 100,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  img: {
    height: 48,
    width: 48,
    borderRadius: 100,
  },
  boxtext: {
    display: 'flex',
    textAlign: 'center',
    marginTop: 12,
    fontSize: 16
  }
});